<template>
	<view class="page-index">
		<scroll-view scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="toViewId" style="height: 100vh;overflow: auto;">
			<view v-for="item in messageList" :key="item.id" :id="'item'+item.id">
				<view class="color-999 f-s-30 text-center p-20">{{item.pushDate}}</view>
				<view class="box" :class="{'active-color':item.id == queryId}">
					<view class="box-bd">
						<view class="box-item box-hd">
							<view class="box-bd-label f-bold f-s-34" style="width: 100%;">{{item.msgName}}</view>
						</view>
						<view class="box-item">
							<view class="box-bd-value">
								<p class="color-222">{{item.first}}</p>
								<p v-for="(cItem,cIndex) in item.contentList" :key="cIndex">{{cItem.label}}：<span class="c-blue" style="color:#32367D">{{cItem.value}}</span></p>
								<!-- <p>姓名：吴阿俊</p>
								<p>挂号科空：神经内科</p>
								<p>看诊医生：王二</p>
								<p>就诊时间:：2015-02-23 15:00-15:15</p> -->
							</view>
						</view>
						<view class="box-item">
							<view class="box-bd-value">
								<p v-if="item.remarkList.length>0" v-for="(cItem2,cIndex2) in item.remarkList">{{cItem2}}</p>
								<p v-else>item.remark</p>		
							</view>
						</view> 
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
</template>

<script>
	import { getPushMessage } from "@/api/message/index.js"
	export default {
		name: 'messsage',
		data() {
			return {
				openid: '',
				cardNum:'',
				messageList:[],
				queryId:'',
				scrollTop: 0, // 滚动条距离顶部的距离
				toViewId: '' // 需要滚动到的子元素的id
			}
		},
		created() {
			let openid = uni.getStorageSync('openid') || ''
			this.openid = openid
			// let usercardNum = JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum || ''
			this.cardNum = JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum || ''
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			this.getMessageList();
		},
		onLoad(options) {
			this.queryId = options.id
			// let openid = uni.getStorageSync('openid') || ''
			// this.openid = openid
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask: true,
			// });
			// this.getMessageList();
			// let hospital = uni.getStorageSync('hospital');
			// this.currentHospital = JSON.parse(hospital);
		},
		methods: {
			// 列表
			getMessageList() {
				getPushMessage({
					openId: this.openid,
					cardNum:this.cardNum,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let newList = []
						newList = res.data.map(item => {
							let arrAll = item.contentStr.split('|')
							let contentList = []
							arrAll.forEach(childItem => {
								contentList.push({
									'label': childItem.split('#')[0],
									'value' : childItem.split('#')[1]
								})
							})
							item. contentList = contentList
							item.remarkList = item.remark.split('\\n')
							return item
						})
						this.messageList = newList || []
						setTimeout(()=>{
							this.$nextTick(()=> {
								this.scrollToItem()
							})
						},100)
						console.log(this.messageList,8989)
					} else {
						this.$msg(res.msg);
					}
				});
			},
			scrollToItem() {
			      this.toViewId = 'item'+this.queryId; // 设置需要滚动到的子元素的id
			      // 动态计算滚动距离并设置scrollTop的值
			      uni.createSelectorQuery().in(this).select('#item'+this.queryId).boundingClientRect(res => {
			        this.scrollTop = res.top; // 设置滚动条距离顶部的距离
			      }).exec();
			    }
		}
	}
</script>

<style scoped>
	.page-index {
	  /* height: 100vh; */
	  background-color: #F3F5F7;
	  padding-top:24rpx;
	  /* overflow: auto; */
	}
	.box {
		width: 94%;
		margin-left: 3%;
	  background-color: #fff;
	  color: #606266;
	  border-radius: 20rpx;
	  font-size: 30rpx;
	  margin-bottom: 20rpx;
	}
	.box-bd-label,.box-bd-value{display: inline-block;}
	.box-bd-label{
		color:#222;
		width: 200rpx;
	}
	.box-bd-value{
		color:#666;
	}
	.box-bd-value p{
		padding: 6rpx 0;
	}
	.box-item {
	  border-bottom: 1px solid #EEEEEE;
	  padding: 24rpx 32rpx;;
	}
	.box-item:last-child {
	  border-bottom: none;
	}
	.col_r{color: #FF7272}
	.col_g{color: #67c23a}
	.active-color{
		background-color: #F2FFFD !important;
	}
</style>